<template>
  <div>
    <el-descriptions
      title="字典类别详情"
      direction="vertical"
      :column="2"
      border
    >
      <el-descriptions-item width="50%" label="名称">
        <el-input type="text" v-model="data.name"></el-input>
      </el-descriptions-item>

      <el-descriptions-item width="50%" label="值">
        <el-input type="text" v-model="data.value"></el-input>
      </el-descriptions-item>

      <el-descriptions-item width="50%" :span="2" label="描述">
        <el-input type="textarea" v-model="data.explain"></el-input>
      </el-descriptions-item>

      <el-descriptions-item v-if="props.data=='6e78ff75ecf811ef9301902e1656e0d2'" width="50%" :span="2" label="会员折扣">
        <el-input-number v-model="data.discount" :min="0" :max="100" controls-position="right" placeholder="请输入折扣百分比">
                <template #suffix>%</template>
              </el-input-number>
      </el-descriptions-item>


      <el-descriptions-item width="50%" label="操作">
        <el-button
          :disabled="data.name.trim() == '' || data.value.trim() == ''"
          type="primary"
          @click="events.add"
        >
          新增
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { Add_Dictionary, Add_Dictionary_type } from "@/api/dictionary/index";
import { close_loading, notice, start_loading } from "@/utils/notice";
import { inject, reactive } from "vue";
interface Data {
  name: string;
  value: string;
  type: string;
  explain: string;
  discount:string
}

const data = reactive<Data>({
  name: "",
  value: "",
  type: "",
  explain: "",
  discount:"0"
});

const props = defineProps(["data"]);
data.type = props.data;

const emit = defineEmits(["myclose"]);

const events = {
  async add() {
    start_loading();
    const res = await Add_Dictionary({
      dtid: props.data,
      name: data.name,
      value: data.value,
      explain: data.explain,
      discount:data.discount
    });
    notice(res);
    close_loading();
    if (res.code === 0) {
      //通知父组件
      emit("myclose");
    }
  },
};

// console.log(props.data.id);

//const aaa = inject("abc");

//console.log(aaa);
</script>

<style scoped></style>
